<template>
  <div>
    <h1>App</h1>
    <p>count:{{ person }}</p>
    <button @click="person.age++">addCount</button>

  </div>
</template>

<script lang="ts">
 import { defineComponent } from "vue"
  export default  defineComponent({
    name:'App',
    });
</script>

<script setup lang="ts">
import { reactive } from "vue";

/* 
  reactive()
    - 返回一个对象的响应式代理
    - 响应式转换是“深层”的：它会影响到所有嵌套的属性
    - reactive只能接受对象类型的数据

*/

interface personType {
  name:string;
  age:number
}

// 对象用类型限制
const person = reactive<personType>({
  name:"小黑子",
  age:19,
});

console.log(person);


</script>

<style lang="less" scoped>
  
</style>
